<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Supermap BUildings add GeoJson Data</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" include="OSMBuildings-SuperMap"
        src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    var map, layer, osm,
        host = window.isLocal ? window.server : "https://iserver.supermap.io";
    url = host + "/iserver/services/map-china400/rest/maps/China";

    //检测浏览器是啥支持canves Buildings 需要Canvas绘制
    if (!document.createElement('canvas').getContext) {
        widgets.alert.showAlert(resources.msg_supportCanvas, false);
    }
    //初始化地图
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.MousePosition(),
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.Zoom()
        ]
    });

    //初始化图层
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {maxResolution: "auto"});
    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized": addLayer});

    //异步加载图层
    function addLayer() {
        map.addLayers([layer]);
        map.setCenter(new SuperMap.LonLat(12957186.36784, 4852711.53595), 12);

        // Supermap 底图上 添加默认的 OSMBuildings geojson 数据
        var geoJSON = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "id": 134,
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [116.39211, 39.91289],
                        [116.39278, 39.90844],
                        [116.39654, 39.90860],
                        [116.39614, 39.91305],
                        [116.39211, 39.91289]
                    ]]
                },
                "properties": {
                    "wallColor": "#DDDDDD",
                    "roofColor": "#F9F7F4",
                    "height": 20,
                    "minHeight": 0,
                    "roofHeight": 5,
                    "roofShape": "pyramid"
                }
            }]
        };

        osm = new OSMBuildings(map);
        osm.load();
        osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
        osm.set(geoJSON);
        osm.click(function (e) {
            // 返回当前点击的feature ID 和 当前的经纬度
            //Buildings 单击事件 返回当前Building的ID 和 经纬度
            widgets.alert.showAlert("FeatureID:" + e.feature, true);
        });
    }
</script>
</body>
</html>